<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入框架css文件 -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">

    <!-- 引入css重置文件 -->
    <link rel="stylesheet" href="./assets/css/reset.css">
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <!-- 引入index的css文件 -->
    <link rel="stylesheet" href="./assets/css/news.css">
</head>

<body>
    <!-- header头部 -->
    <nav class="navbar navbar-default nav2">
        <div class="container">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt="" class="wow fadeInDown"
                        data-wow-delay="0ms"></a>
            </div>

            <div class="collapse navbar-collapse lis" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./index.html" id="home" class="wow fadeInDown" data-wow-delay="100ms">Home</a></li>
                    <li><a href="./pages.html" class="wow fadeInDown" data-wow-delay="200ms">Pages</a></li>
                    <li><a href="./investment.html" class="wow fadeInDown" data-wow-delay="300ms">Investment</a></li>
                    <li><a href="./news.html" class="wow fadeInDown" data-wow-delay="400ms">News</a></li>
                    <li><a href="./calculator.html" class="wow fadeInDown" data-wow-delay="500ms">Calculator</a></li>
                    <li><a href="./contacts.html" class="wow fadeInDown" data-wow-delay="600ms">Contacts</a></li>
                </ul>
            </div>
        </div>
    </nav>


    <!-- 头像部分 -->
    <div class="colliys">
        <div class="container">
            <div class="head wow fadeInDown" data-wow-delay="200ms">
                <!-- 图片 -->
                <div class="pic"></div>

                <!-- 文字 -->
                <div class="text">
                    <div class="top">
                        <div class="left">
                            Antonio Colliys
                            <span>Admin</span>
                        </div>
                        <span class="glyphicon glyphicon-heart" id="right"></span>
                    </div>
                    <p class="under">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                        tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- news -->
    <div class="news">
        <div class="container">
            <div class="read">
                <div class="title wow fadeInDown" data-wow-delay="250ms">
                    <div class="left">Related News</div>
                </div>
                <!-- 内容 -->
                <div class="conten">
                    <div class="item wow fadeInDown" data-wow-delay="300ms">

                        <div class="top">
                            <div class="video"><img src="./assets/images/sc1.jpg" alt=""></div>
                            <div class="day">30 May, 2015</div>
                            <div class="post">Example Post With Gallery</div>
                        </div>

                        <div class="center">
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.
                            </p>
                            <div class="under">
                                <div class="btns">No Comments</div>
                            </div>
                        </div>

                    </div>



                    <div class="item wow fadeInDown" data-wow-delay="300ms">
                        <div class="top">
                            <div class="video"><img src="./assets/images/sc1.jpg" alt=""></div>
                            <div class="day">30 May, 2015</div>
                            <div class="post">Example Post With Gallery</div>
                        </div>
                        <div class="center">
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod.
                            </p>
                            <div class="under">
                                <div class="btns">No Comments</div>
                            </div>
                        </div>

                    </div>


                    <div class="item wow fadeInDown" data-wow-delay="300ms">
                        <div class="top">
                            <div class="video"><img src="./assets/images/sc1.jpg" alt=""></div>
                            <div class="day">30 May, 2015</div>
                            <div class="post">Example Post With Gallery</div>
                        </div>
                        <div class="center">
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod.
                            </p>
                            <div class="under">
                                <div class="btns">No Comments</div>
                            </div>
                        </div>

                    </div>

                    <div class="item wow fadeInDown" data-wow-delay="300ms">
                        <div class="top">
                            <div class="video"><img src="./assets/images/sc1.jpg" alt=""></div>
                            <div class="day">30 May, 2015</div>
                            <div class="post">Example Post With Gallery</div>
                        </div>
                        <div class="center">
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod.
                            </p>
                            <div class="under">
                                <div class="btns">No Comments</div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>


    <!-- Leave a Comment 部分 -->
    <div class="leave">
        <div class="container">

            <div class="comment">
                <div class="walter">
                    <!-- 标题 -->
                    <div class="com wow fadeInDown" data-wow-delay="300ms">Comments<span>(3)</span></div>


                    <!-- 内容 -->
                    <div class="frank wow fadeInDown" data-wow-delay="350ms">
                        <div class="pic"><img src="./assets/images/10-11_09.png" alt=""></div>

                        <div class="text">
                            <div class="top">
                                <!-- 左边 -->
                                <div class="left">
                                    Frank Adams
                                    <span>Says</span>
                                </div>
                                <!-- 右边 -->
                                <div class="right">
                                    <span class="ago">2 weeks ago</span>
                                    <span class="glyphicon glyphicon-option-vertical"></span>
                                </div>
                            </div>
                            <p class="under">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                        </div>
                    </div>
                    <!-- 第二个 -->
                    <div class="frank wow fadeInDown" data-wow-delay="400ms">
                        <div class="pic"><img src="./assets/images/hse2.png" alt=""></div>

                        <div class="text">
                            <div class="top">
                                <!-- 左边 -->
                                <div class="left">
                                    Frank Adams
                                    <span>Says</span>
                                </div>
                                <!-- 右边 -->
                                <div class="right">
                                    <span class="ago">2 weeks ago</span>
                                    <span class="glyphicon glyphicon-option-vertical"></span>
                                </div>
                            </div>
                            <p class="under">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                        </div>
                    </div>
                    <!-- 第三个s -->
                    <div class="frank wow fadeInDown" data-wow-delay="500ms"> 
                        <div class="pic"><img src="./assets/images/dh2.png" alt=""></div>

                        <div class="text">
                            <div class="top">
                                <!-- 左边 -->
                                <div class="left">
                                    Frank Adams
                                    <span>Says</span>
                                </div>
                                <!-- 右边 -->
                                <div class="right">
                                    <span class="ago">2 weeks ago</span>
                                    <span class="glyphicon glyphicon-option-vertical"></span>
                                </div>
                            </div>
                            <p class="under">
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                euismod
                                tincidunt ut laoreet dolore magna aliquam erat volutpat.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 标题 -->
                <div class="title wow fadeInDown" data-wow-delay="500ms">Leave a Comment</div>
                <form action="" class="wow fadeInDown" data-wow-delay="550ms">
                    <!-- input标签 -->

                    <div class="names">
                        <input type="text" placeholder="Your Name">
                    </div>

                    <div class="names">
                        <input type="text" placeholder="Email Address">
                    </div>

                    <!-- 文本框 -->
                    <textarea name="" id="" cols="30" rows="10" placeholder="Message"></textarea>

                    <!-- 按钮 -->
                    <div class="send">
                        <button>Send Comment</button>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <!-- 友情链接 -->
    <div class="cap">
        <div class="container">
            <div class="bigbox">
                <!-- 第一个盒子 -->
                <div class="read wow fadeInDown" data-wow-delay="400ms">
                    <div class="logo3"><img src="./assets/images/logo.png" alt=""></div>
                    <!-- 文字 -->
                    <div class="text">
                        Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est
                        notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas
                        humanitatis per seacula quarta decima et quinta decima. Read More...

                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
                        tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    </div>
                    <p class="social">Social Network</p>
                    <div class="logo4">
                        <img src="./assets/images/icon-facebook.png" alt="">
                        <img src="./assets/images/icon2.png" alt="">
                        <img src="./assets/images/icon3.png" alt="">
                        <img src="./assets/images/icon4.png" alt="">
                        <img src="./assets/images/icon5.png" alt="">
                        <img src="./assets/images/icon6.png" alt="">
                        <img src="./assets/images/icon7.png" alt="">
                        <img src="./assets/images/icon8.png" alt="">

                    </div>
                </div>

                <!-- 第二个盒子 -->
                <div class="recen wow fadeInDown" data-wow-delay="500ms">
                    <div class="title">Recent News</div>
                    <div class="may">
                        <div class="may07">07 May, 2015</div>
                        <div class="mirum">Mirum est notare quam littera gothica, quam nunc putamus parum, anteposuerit
                            litterarum.
                        </div>
                    </div>
                    <div class="apr">
                        <div class="aorit">23 April, 2015</div>
                        <div class="est">Claritas est etiam processus dynamicus.</div>
                    </div>

                    <div class="dece">
                        <div class="num">05 December, 2014</div>
                        <div class="times">Eodem modo typi, qui nunc nobis videntur clari, sollemnes in futurum.</div>
                    </div>
                </div>

                <!-- 第三个盒子 -->
                <div class="email wow fadeInDown" data-wow-delay="600ms">
                    <div class="title">Email Newsletters</div>
                    <div class="sing">
                        <div class="mirum">Sign Up for Our Newsletter to get Latest Updates and Offers. Subscribe to
                            receive news in your inbox.
                        </div>
                    </div>
                    <div class="full">
                        <span>Full Name</span>
                        <input type="text" placeholder="Dmitry Tar">
                    </div>

                    <div class="full">
                        <span>Email Address</span>
                        <input type="password" placeholder="please">
                    </div>
                    <div class="btns">
                        <button type="">Subscribe Now</button>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <!-- footer部分 -->
    <div class="footer wow fadeInDown" data-wow-delay="400ms">
        <div class="container">
            <div class="good">
                <div class="top"><img src="./assets/images/huo.png" alt=""></div>
                <div class="goods">
                    © 2015 Good Investment <span> Globals</span> / Designed by <span>ThemeFire</span> / Only for Envato
                    Market
                </div>
            </div>

        </div>

    </div>
</body>

</html>
<!-- 框架依赖jq -->
<script src="./assets/js/jquare.js"></script>

<script src="./assets/js/bootstrap.min.js"></script>

<!-- less编译 -->
<script src="./assets/js/less.min.js"></script>

<script src="./assets/js/wow.min.js"></script>
<script>
    // wow.js 插件的初始化
    new WOW().init();
</script>